<template>
    <div class="drawList-box">
        <my-header :title="title"></my-header>
        
        <img src="//img.jianke.com//upload/prodimage/201803/201831495531579.jpg" alt="">

        <div class="box">
            <!-- <ul class="clearfix" id="text"  @click="onClick($event)"> -->
            <ul class="clearfix" id="text">
                <!-- <li v-for="(value, index) in currentList" :key="index">
                    <a :class="[type === value ? 'current' : '' ]" @click = "type = value">{{ value }}</a>
                </li> -->
            </ul>
        </div>

        <div class="content1-list" v-for="value in wrap" :key="value.id">
            <router-link :to="'/product/' + value.productCode">
                <div class="list">
                    <div class="list-left">
                        <img :src="value.img" alt="">
                    </div>
                    <div class="list-right">
                        <p class="list-text">{{ value.content }}</p>
                        <p>{{ value.text }}</p>
                        <p class="list-price">
                            <span class="price-left">
                                <em>￥</em>
                                {{ value.price }}
                            </span>
                            <span class="price-right">立即购买</span>
                        </p>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
// import imgUrl1 from '../../../assets/image/mobile5/mobile5-1.jpg'
import myHeader from 'Components/common/myHeader'

import {mapActions, mapGetters} from 'vuex'
export default {
    components: {
        myHeader
    },
    data () {
        return {
            moblie5List: [],
            moblie5List1: [],
            title: '医疗器械',
            currentList: ['体温计','血糖用品','血压产品','呼吸道用具','医用耗材','创口贴'],
            type: '体温计',
            wrap:[
                {id:'810635', img:'//img.jianke.com/upload/prodimage/sl201707/201772714452612.jpg', content:'璟优克电子体温计', price: '9.90', text:'家庭必备体温计', productCode: '810635'},
                {id:'11458', img:'//img.jianke.com/upload/prodimage/sl201802/20182515470166.jpg ', content:'玻璃体温计(口腔型CRW', price: '5.90', text:'1支传统体温计，熟悉的感觉', productCode: '11458'},
                {id:'156198', img:'//img.jianke.com/upload/prodimage/sl201801/2018130181121211.jpg', content:'电子体温计MC-246(欧', price: '35.00', text:'轻松测体温', productCode: '156198'},
                {id:'8540', img:'//img.jianke.com/upload/prodimage/sl201705/201751011528367.jpg', content:'体温计(正兴)', price: '3.00', text:'产品可用于测量人体体温。	', productCode: '8540'},
                {id:'253640', img:'//img.jianke.com/upload/prodimage/sl201408/2014816114327689.jpg', content:'利贝儿红外耳/额温枪I', price: '118.00', text:'通过测量耳腔或额头的热辐射来显示被测对象的体温。', productCode: '253640'},
                {id:'829069', img:'//img.jianke.com/upload/prodimage/sl201804/2018417172613411.jpg', content:'电子体温计(柏美康)', price: '38.00', text:'背光式 蜂鸣提示 不含水银', productCode: '829069'},
                {id:'750600', img:'//img.jianke.com/upload/prodimage/sl201804/201841110530622.jpg', content:'红外线体温计FT-F41', price: '89.00', text:'秒测额头温度，妈宝必备品', productCode: '750600'},
                {id:'563889', img:'//img.jianke.com/upload/prodimage/sl201802/201828111824514.jpg', content:'医用电子体温计(东阿', price: '20.00', text:'见说明书。', productCode: '563889'},
                {id:'344132', img:'//img.jianke.com/upload/prodimage/sl201611/2016112517103185.jpg', content:'泰尔茂女士电子体温计', price: '148.00', text:'测温部位：口中(舌下)', productCode: '344132'},
                {id:'226916', img:'//img.jianke.com/upload/prodimage/sl201802/201825115224188.jpg', content:'金秀儿电子体温计(粉', price: '45.00', text:'测体温', productCode: '226916'},
                {id:'156296', img:'//img.jianke.com/upload/prodimage/sl201802/201826165947480.jpg', content:'红外线耳式体温计(耳', price: '278.00', text:'检测迅速 不用接触 轻松测量 宝宝适用', productCode: '156296'},
                {id:'491934', img:'//img.jianke.com/upload/prodimage/sl201510/2015101215181610.jpg', content:'宝莱特育儿宝智能体温', price: '228.00', text:'连续测温 远程监控，实时掌握宝宝体温变化', productCode: '491934'},
            ]
        }
    },
    methods: {
        ...mapActions(['getInstrument']),
    },
    computed: {
        ...mapGetters(['getInstruments'])
    },
    async mounted () {
        await this.getInstrument();
        this.moblie5List = this.getInstruments && this.getInstruments || [];
        await this.getInstrument();
        this.moblie5List1 = this.getInstruments && this.getInstruments || [];
        
        // 改变背景颜色
        // document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        // document.querySelector('.van-icon').style.color = '#ffffffcc';
        // document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        // document.querySelector('.van-hairline--bottom').style.background = '#80149e';
        // document.querySelector('.van-hairline--bottom').style.opacity = '0.9'
    }
};
</script>

<style lang="scss" scoped>
    @import 'Css/common-row.scss';

    a {
        color: #333;
    }

    .content1-list {
        padding: 0;
    }
    .list-price {
        padding-top: .1rem !important;
    }

    .list {
        padding: .25rem .1rem .1rem .1rem !important;
        background: #fff !important;
        img {
            width: .8rem !important;
            height: .8rem !important;
        }
    }


    .box {
        width: 100%;
        padding: 4px 0;
        max-height: 70px;
        overflow: hidden;
        li {
            margin: 3px 1.5%;
            width: 30%;
            height: 30px;
            overflow: hidden;
            float: left;
            text-align: center;
            a {
                padding: 0 2px;
                color: #333;
                background-color: #FFF;
                border: 1px solid #ddd;
                display: block;
                font-size: 14px;
                height: 28px;
                line-height: 28px;
            }
            a.current {
                background-color: #fff;
                color: #079dd8;
                border: 1px solid #079dd8;
            }
        }
    }


</style>
